import React, { useEffect, useState } from 'react';
import { Form, Card, message } from 'antd';
import { withRoutePage } from '@/utils/enhanceUtils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { hrOverviewRecheck } from '@/services/salaryManage/salaryCalculate';
import { isSuccess } from '@/utils/request';
import ChartWrapper from '@/pages/SalaryManage/components/ChartWrapper';
import { OrganizationNameHead } from '@/pages/SalaryManage/components/OrganizationName';

import styles from './index.less';

const { querySalaryRecheckDataChartType } = hrOverviewRecheck;
const Page = props => {
    const { location } = props;
    const { query } = location;
    const { employeeCode, yearMonth: yearAndMonth, organizationCode } = query;
    const [param, setParam] = useState({});

    const year = yearAndMonth.substr(0, 4);
    const month = yearAndMonth.substr(5);

    useEffect(() => {
        const initPage = async () => {
            const [response] = await Promise.all([
                querySalaryRecheckDataChartType({
                    employeeCode,
                    year,
                    month,
                    organizationCode
                })
            ]);

            if (isSuccess(response)) {
                setParam(response.data)
                return;
            }
            message.error(response.msg);
        };
        initPage();
    }, [query]);

    return (
        <PageHeaderWrapper type="success">
            <div className={styles.chartContainer}>
                <Card bordered={false} title="数据详情">
                    <Form layout="inline" className={styles.chartHeader}>
                        <Form.Item label="行政机构"><OrganizationNameHead organizationCode={organizationCode} /></Form.Item>
                        <Form.Item label="工号">{param.employeeNo}</Form.Item>
                        <Form.Item label="姓名">{param.name}</Form.Item>
                        <Form.Item label="职级">{param.rankName}</Form.Item>
                        <Form.Item label="时间">{param.yearMonth}</Form.Item>
                    </Form>
                    {param.salaryRecheckDiagramTypListVOList?.map(item => (
                        <ChartWrapper
                            {...item}
                            key={item.diagramTypeName}
                            year={year}
                            month={month}
                            employeeCode={employeeCode}
                            organizationCode={organizationCode}
                        />
                    ))}
                </Card>
            </div>
        </PageHeaderWrapper>
    );
};

export default withRoutePage(Page);
